<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
 <div style="padding: 10px;">
      	<button type="button" class="btn btn-warning" onclick="addItem()">
			<i class="fa fa-plus"></i> 添加新项
		</button>
		
      	<button type="button" class="btn btn-blue" onclick="toItemList()">
			<i class="fa  fa-road"></i> 查看已添加
		</button>
    </div>
 <div class="table-scrollable">
 <form id="sysDictionaryForm" class="form-horizontal form-bordered" action="/workordermanage/add" method="post">
 <table id="childrenTable" class="table table-striped table-hover">
     	<thead>
     		<tr style="background-color: #ddd;">
	     		<th></th>
	      		<th>工作单号</th>
	      		<th>到达地</th>
	      		<th>产品</th>
	      		<th>件数</th>
	      		<th>重量</th>
	      		<th>配载要求</th>
	      		<th></th>
     		</tr>
     	</thead>
     	
     	<tbody></tbody>
     	
  </table>
  </form>
</div>
<div style="display: none;">
	<table id="trTemplate">
		<tr>
			<td class="text-center">
				<a class="btn btn-icon-only red" href="javascript:;" onclick="removeItem(this)">
					<i class="fa fa-trash"></i>
				</a>
			</td>
			<td>
				<div class="input-icon right">
					<i class="fa"></i>
					<input type="text" name="id" class="form-control" required/>
				</div>
			</td>
			<td>
				<div class="input-icon right">
					<i class="fa"></i>
					<input type="text" name="arrivecity" class="form-control" required/>
				</div>
			</td>
			<td>
				<div class="input-icon right">
					<i class="fa"></i>
					<input type="text" name="product" class="form-control" required/>
				</div>
			</td>
			<td>
				<div class="input-icon right">
					<i class="fa"></i>
					<input type="text" name="num" class="form-control number" required/>
				</div>
			</td>
			<td>
				<div class="input-icon right">
					<i class="fa"></i>
					<input type="text" name="weight" class="form-control number" required/>
				</div>
			</td>
			<td>
				<div class="input-icon right">
					<i class="fa"></i>
					<input type="text" name="floadreqr" class="form-control" required />
				</div>
			</td>
			<td class="text-center">
				<a class="btn btn-icon-only green" href="javascript:;" onclick="saveItem(this)">
					<i class="fa fa-check "></i>
				</a>
			</td>
		</tr>
	</table>
 </div>
 <script type="text/javascript">
	$(function(){
		
	});
	// 新增
	function addItem(){
		
		$('#childrenTable').append($('#trTemplate').html());
		
		//resetTrNum('childrenTable');
	}
	// 删除
	function removeItem(item){
		
		$(item).parent().parent().remove();
		
		//resetTrNum('childrenTable');
	}
	
	function saveItem(item) {
		
		if($('#sysDictionaryForm').valid()) {
			
			var url = $("#sysDictionaryForm").attr("action");
			var data = $('#sysDictionaryForm').serialize();
			
			$.post(url,data,function(result){
				if(result.code == 0) {
					layer.msg(result.message, {shift: 1});
					setTimeout(function(){
						$(item).parent().parent().find("input").attr("readonly","readonly");
					}, 1200);
				}else {
					layer.msg(result.message, {shift: 6});
				}
			})
		}
	}
	
	function toItemList() {
		
		var url = "${webRoot}/workordermanage/list";
		$.post(url,{},function(result){
			$("#childrenTable tbody").empty();
			$("#childrenTable tbody").nextAll().remove();
			$("#childrenTable tbody").html(result);
		},"html")
	}
	
</script>